<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<title>HTML</title>
		<meta name="description" content="" />
		<meta name="author" content="Ding Jiun-Hung" />

		<meta name="viewport" content="width=device-width; initial-scale=1.0" />

		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

		<style type="text/css">
			<!--			
			#fl_menu {position:absolute; top:50px; left:0px; z-index:9999; width:150px; height:50px;}
			#fl_menu .label{padding-left:25px; line-height:50px; font-family:"Arial Black", Arial, Helvetica, sans-serif; font-size:20px; font-weight:bold; background:#000; color:#fff; letter-spacing:10px;}
			#fl_menu .menu{display:none;}
			#fl_menu .menu .menu_item{ letter-spacing:2px; padding: 10px; padding-left:40px; display:block; background:#000; color:#bbb; border-top:1px solid #333; font-family:Arial, Helvetica, sans-serif; font-size:18px; text-decoration:none;}
			#fl_menu .menu a.menu_item:hover{background:#333; color:#fff;}
			.content{width:520px; margin:50px auto;}
			-->
		</style>

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
	</head>

	<body>

		<div id="fl_menu">
			<div class="label">
				MENU
			</div>
			<div class="menu">
				<a href="#" class="menu_item">Uno 1</a>
				<a href="#" class="menu_item">Uno 2</a>
				<a href="#" class="menu_item">Uno 3</a>
				<a href="#" class="menu_item">Uno 4</a>
				<a href="#" class="menu_item">Uno 5</a>
				<a href="#" class="menu_item">Uno 6</a>
				<a href="#" class="menu_item">Uno 7</a>
				<a href="#" class="menu_item">Uno 8</a>
				<a href="#" class="menu_item">Uno 9</a>
				<a href="#" class="menu_item">Uno 10</a>
			</div>
		</div>

		<script>
			//config
			$float_speed = 1000;
			//milliseconds
			$float_easing = "easeOutQuint";
			$menu_fade_speed = 500;
			//milliseconds
			$closed_menu_opacity = 0.75;

			//cache vars
			$fl_menu = $("#fl_menu");
			$fl_menu_menu = $("#fl_menu .menu");
			$fl_menu_label = $("#fl_menu .label");

			$(window).load(function() {
				menuPosition = $('#fl_menu').position().top;
				FloatMenu();
				$fl_menu.hover(function() {//mouse over
					$fl_menu_label.fadeTo($menu_fade_speed, 1);
					$fl_menu_menu.fadeIn($menu_fade_speed);
				}, function() {//mouse out
					$fl_menu_label.fadeTo($menu_fade_speed, $closed_menu_opacity);
					$fl_menu_menu.fadeOut($menu_fade_speed);
				});
			});

			$(window).scroll(function() {
				FloatMenu();
			});

			function FloatMenu() {
				var scrollAmount = $(document).scrollTop();
				var newPosition = menuPosition + scrollAmount;
				if($(window).height() < $fl_menu.height() + $fl_menu_menu.height()) {
					$fl_menu.css("top", menuPosition);
				} else {
					$fl_menu.stop().animate({
						top : newPosition
					}, $float_speed, $float_easing);
				}
			}
		</script>

		<!-- Caption -->
		<img class="caption" title="This is the image caption" src="http://placehold.it/400x350/4D99E0/ffffff.png&text=400x350" width="400" height="350" />
		<br>
		<!-- Caption -->
		<img class="caption" title="This is the image caption" src="http://placehold.it/400x350/4D99E0/ffffff.png&text=400x350" width="400" height="350" />
		<br>
		<!-- Caption -->
		<img class="caption" title="This is the image caption" src="http://placehold.it/400x350/4D99E0/ffffff.png&text=400x350" width="400" height="350" />
		<br>
		</div>
	</body>
</html>

